<template>
  <el-dialog :title="setting.title"
             :visible.sync="setting.dialogVisible"
             :close-on-click-modal="false"
             append-to-body
             custom-class="trace-dailog"
             @open="onOpenCallback"
             @close="onCloseCallback">
    <el-tabs v-model="activeName"
             @tab-click="handleClick"
             type="card">
      <el-tab-pane label="项目信息"
                   name="info">
        <trace-detail-info :contract-id="setting.contractId"
                           :maturity="setting.maturity"
                           :mode="setting.mode"
                           @close-detail="onClose"
                           ref="tracedetail"></trace-detail-info>
      </el-tab-pane>
      <el-tab-pane label="跟踪记录"
                   name="trace"
                   v-if="this.setting.mode === 2">
        <trace-table-info :contract-id="setting.contractId"
                          :advancing-state="setting.advancingState"
                          :maturity="setting.maturity"></trace-table-info>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="info"
                 @click="onClose"
                 size="small"
                 v-if="activeName === 'info'">取 消</el-button>
      <el-button type="primary"
                 size="small"
                 @click="onChange"
                 v-if="activeName === 'info'">确 定</el-button>
      <el-button type="info"
                 @click="onClose"
                 size="small"
                 v-if="activeName === 'trace'">关 闭</el-button>
      <el-button type="primary"
                 size="small"
                 @click="onNext"
                 v-if="activeName === 'trace'">下一步</el-button>
    </div>
  </el-dialog>
</template>
<script>
import TraceDetailInfo from './trace-detail-info'
import TraceTableInfo from './trace-table-info'
import TraceMonthPlan from './trace-table-month-plan'
import Bus from '@/utils/bus'

export default {
  data() {
    return {
      setting: {
        title: '添加项目',
        mode: 1,
        loadding: false,
        dialogVisible: false, // dailog状态
        contractId: null,
        maturity: '',
        advancingState: ''
      },
      activeName: 'trace' // tag标签默认选中跟踪记录
    }
  },
  mounted() {
    Bus.$on('open-project-dailog', (mode, contractId, maturity, advancingState) => {
      this.setting.mode = mode
      this.setting.dialogVisible = true
      this.setting.contractId = contractId
      this.setting.maturity = maturity
      this.setting.advancingState = advancingState
    })
  },
  methods: {
    // 关闭dailog
    onClose() {
      this.setting.dialogVisible = false
    },
    // 修改内容提交确定
    onChange() {
      if (this.setting.mode === 1) {
        // 新增时,调用子组件的验证方法
        this.$refs.tracedetail.voidProjectInfo()
      } else {
        // 编辑时,调用子组件的添加方法
        this.$refs.tracedetail.addProjectInfo()
      }
    },
    // 打开dailog回调
    onOpenCallback() {
      if (this.setting.mode === 1) {
        this.setting.title = '添加项目'
        this.activeName = 'info'
        // 添加项目初始化下拉数据
        this.$refs.tracedetail.initEnum()
        // 修复点击编辑后，点击添加的数据清除
        this.$refs.tracedetail.projectInfoForm = {}
      }
      if (this.setting.mode === 2) {
        this.setting.title = '编辑项目'
        this.activeName = 'trace'
      }
    },
    // 关闭dailog回调
    onCloseCallback() {
      this.$emit('close-dialog')
      // 关闭对话框,重置项目信息验证消息
      this.$refs.tracedetail.fromResetField()
    },
    // Tag标签点击事件
    handleClick(tab) {
      if (tab.name === 'info') {
        if (this.setting.mode === 2) {
          this.$refs.tracedetail.getProjectInfo()
        } else {
          this.$refs.tracedetail.projectInfoForm = {}
        }
      }

      if (tab.name === 'monthPlan') this.$refs.monthPlan.getTableData()
    },
    // 下一步
    onNext() {
      this.activeName = 'info'
      this.$refs.tracedetail.getProjectInfo()
    }
  },
  components: {
    TraceDetailInfo,
    TraceTableInfo,
    TraceMonthPlan
  }
}
</script>
